<script setup>
const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: "",
  },
  options: {
    type: Array,
    default: () => [],
  },
});
const emit = defineEmits(["update:modelValue"]);

const show = ref(false);
const value = ref([]);

const onConfirm = ({ selectedValues }) => {
  emit("update:modelValue", selectedValues[0]);
  show.value = false;
};

watch(
  () => props.modelValue,
  (val) => {
    value.value = [val];
  },
  {
    immediate: true,
  }
);

defineExpose({
  show() {
    show.value = true;
  },
});
</script>

<template>
  <van-popup v-model:show="show" destroy-on-close position="bottom">
    <van-picker
      :model-value="value"
      :columns="options"
      @confirm="onConfirm"
      @cancel="show = false"
    />
  </van-popup>
</template>
